<!--  -->
<template>
    <div class="com-container">
        <div class="com-chart" ref="RefsRank"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
import { getDataJson } from '@/api/index.js';
export default {
    components: {},
    computed: {
        ...mapState(['theme']),
    },
    props: {},
    watch: {
        theme () {
            console.log('主题切换了')
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        }
    },
    data() {
        return {
            chartInstance:null,
            allData:null,//服务器返回的数据
            startValue:0,//区域缩放的起点值
            endValue:9,//区域缩放的终点值
            timerID:null,//定时器容器
        }
    },
    created(){
        this.$WebSocket.registerCallBack('rankData',this.getData)
    },
    mounted() {
        this.initChart();
        // this.getData(); 取消这一步
        // 通过socket通信,来传递需要获取的数据
        this.$WebSocket.send({
            action:'getData',
            socketType:'rankData',
            chartName:'rank',
            value:""
        })
        window.addEventListener('resize', this.screenAdapter);
        //在页面加载完成时，主动调用一下
        this.screenAdapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
        this.$WebSocket.unRegisterCallBack('rankData')
    },
    methods: {
        //初始化
        async initChart() {
            const _this = this;
            this.chartInstance = this.$Echarts.init(this.$refs.RefsRank, this.theme);
            const initOptions = {
                title:{
                    text:'| 地区销售排行',//主标题
                    top:20,
                    left:20
                },
                grid:{
                    top:'40%',
                    left:'5%',
                    right:'5%',
                    bottom:'5%',
                    containLabel:true,//距离包含坐标轴上的文字 ，如果设置为 true  yAxis类目轴 会 产生效果
                },
                tooltip:{
                    trigger:'axis', //axis 鼠标划入轴上，内容显示，并显示一个竖线
                    axisPointer:{
                        type:'line',
                        z:0,//层级
                        lineStyle:{
                            color:'#2D3443'
                        }
                    },
                },
                xAxis: {
                    type: 'category',
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',//看配置，还有很多
                            textStyle: { // 设置文字颜色样式
                                color: '#FFF'
                            },
                        },
                        // itemStyle: {
                        //     color: new _this.$Echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#5052EE' }, { offset: 1, color: '#AB6EE5' }])
                        // }
                    }
                ]
            }
            this.chartInstance.setOption(initOptions)
            //对图表对象，进行鼠标事件进行监听
            this.chartInstance.on('mouseover',(arg)=>{
                //鼠标移入事件
                console.log(`鼠标移入事件`);
                console.log(`arg`,arg);
                this.handleClearInterval()
            });
            this.chartInstance.on('mouseout',(arg)=>{
                //鼠标移出事件
                console.log(`鼠标移出事件`);
                this.startInterVal()
            });

        },
        //获取数据
        async getData(data) {
            try {
                // this.allData = await getDataJson('rank');//
                this.allData = data;//
                //对数据进行排序
                this.allData.sort((a, b) => {
                    // return a.value - b.value;//从小到大
                    return b.value - a.value;//从大到小
                })
                this.updateChart()
                this.startInterVal()
            } catch (error) {
                console.log(error)
            }
        },
        //更新视图，处理数据
        updateChart() {
            //处理图表需要的数据
            const colorArr = [
                ['#0BA82C', '#4FF778'],
                ['#2E72BF', '#23E5E5'],
                ['#5052EE', '#AB6EE5']
            ]
            const _this = this;
            const provinceArr = this.allData.map(item => item.name)
            const valueArr = this.allData.map(item => item.value)
            const dataOptions = {
                xAxis: {
                    data: provinceArr
                },
                //区域缩放
                dataZoom:{
                    show: false,
                    startValue: _this.startValue,
                    endValue: _this.endValue
                },
                series: [
                    {
                        data: valueArr,
                        itemStyle:{
                            color:arg=>{
                                let targetColorArr = null;
                                if(arg.value > 300){
                                    targetColorArr = colorArr[0]
                                }else if(arg.value > 200){
                                    targetColorArr = colorArr[1]
                                }else{
                                    targetColorArr = colorArr[1]
                                }
                                return new _this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: targetColorArr[0] }, { offset: 1, color: targetColorArr[1] }])
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(dataOptions)
        },
        //定义一个定时器的方法
        startInterVal(){
            const _this = this;
            this.handleClearInterval();//事先干掉定时器
            this.timerID = setInterval(()=>{
                _this.startValue++
                _this.endValue++
                if(_this.endValue > _this.allData.length-1){
                    _this.startValue = 0
                    _this.endValue = 9
                }
                _this.updateChart()
            },5000)
        },
            //干掉定时器
        handleClearInterval(){
            //干掉定时器
            clearInterval(this.timerID)
        },
        // 当浏览器的大小发生变化的时候，会调用方法，来完成屏幕的适配
        screenAdapter() {
            this.$nextTick(() => {
                const titleFontSize = this.$refs.RefsRank.offsetWidth / 100 * 3.6;
                //分辨率大小的相关配置项
                const adapterOptions = {
                    title: {
                        textStyle: { //主标题 文字样式设置
                            fontSize: titleFontSize,
                        },
                    },
                    tooltip: {
                        axisPointer: {
                            lineStyle: {
                                width: titleFontSize,
                            }
                        },
                    },
                    series: [
                        {
                            barWidth: titleFontSize,//柱宽度
                            itemStyle: {
                                barBorderRadius: [titleFontSize / 2,titleFontSize / 2,0, 0],//柱圆角设置 
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(adapterOptions);
                //重新计算和绘制图表
                this.chartInstance.resize()
            })
        },
    }
}
</script>
<style lang='scss' scoped></style>